<template>
  <div class>
    <!--面包屑-->
    <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
    <div class="banner">
      <div class="archives-list-box mb-10">
        <h1 class="Basics-title">
          <h2>巡视巡查</h2>
        </h1>
        <div class="top1">
          <div class="left">
            <span>问题分类：</span>
            <el-input v-model="paramsJson.category" class="first" placeholder="请输入问题分类"></el-input>
            <el-button type="primary" class="five" @click="problemMore">查询</el-button>
            <el-button class="five" @click="resetList">重置</el-button>
          </div>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableArchives"
          tooltip-effect="dark"
          style="width: 100%"
          border
        >
          <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="category" label="问题分类"></el-table-column>
          <el-table-column prop="name" label="问题清单" width="582"></el-table-column>
          <el-table-column prop="finishedTime" label="最终提交时间" width="196" align="center"></el-table-column>
          <el-table-column label="操作" width="121" align="center">
            <template slot-scope="scope">
              <el-button type="BasicsLook" @click="lookArchive(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="fenye">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 30, 50]"
            layout="total, prev, pager, next, sizes,jumper"
            :current-page.sync="paramsJson.pageNum"
            :page-size="paramsJson.pageSize"
            :total="total"
            style="font-weight:400;"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//面包靴
import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
export default {
  components: {
    Breadcrumb,
    BaiduMap,
  },
  data() {
    return {
      paramsJson: {
        orgId: this.$route.query.orgId,
        pageNum: 1,
        pageSize: 10,
        category:''
      },
      total:0,
      time:[],
      //面包靴跳转数据
      Breadcrumb: [
        {
          name: "廉政档案",
          link: "IncorruptibleArchives",
        },
        {
          name: "公司档案",
          link: "archives",
        },
        {
          name: "公司档案详情",
          link: "Detail",
        },
        {
          name: "巡视巡查更多",
          link: "SurMore",
        },
      ],
      //档案列表
      tableArchives: [],
    };
  },
  mounted() {
    this.problemMore()
  },
  methods: {
    resetList(){
      this.paramsJson.pageNum = 1
      this.paramsJson.pageSize = 10
      this.paramsJson.category = ''
      this.problemMore()
    },
    problemMore(){
      this.Api.problemMore(this.paramsJson).then((res) => {
        if (res.code == 0) {
          this.tableArchives = res.data.records
          this.total = res.data.total
        }
      })
    },
    // 档案列表查看
    lookArchive(e) {
      this.$router.push({ name: "SuperviseMore", query: { id:e.id }});
    },
    // 分页pageSize 改变触发事件 
    handleSizeChange(val) {
        this.paramsJson.pageSize = val
        this.problemMore()
    },
    // 分页currentPage 改变触发事件
    handleCurrentChange(val) {
      this.paramsJson.pageNum = val
      this.problemMore()
    },
  },
};
</script>
<style lang="less" scoped>
.banner {
  width: 1580px;
  min-height: 892px;
  background: white;
  box-sizing: border-box;
}
.archives-list-box {
  padding: 20px;
  background-color: white;
  /deep/.el-table__header-wrapper {
    .has-gutter {
      tr {
        th {
          padding: 10px 0;
          background-color: #fafafa;
          color: rgba(0, 0, 0, 0.85);
        }
      }
    }
  }
}
.mb-10 {
  margin-bottom: 10px;
}
.companyName span {
  display: inline-block;
  width: 70px;
  height: 14px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 14px;
}
//按钮的统一样式
.el-button {
  width: 70px;
  height: 30px;
  padding: 0;
  font-size: 14px;
}
//新建按钮
/deep/.el-button--BasicsBuild {
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(61, 127, 255, 1);
  color: rgba(61, 127, 255, 1);
}
//修改按钮
.el-button--change {
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(61, 127, 255, 1);
  color: #3d7fff;
}
//详情按钮
// .el-button--detail {
//   background: rgba(255, 255, 255, 1);
//   border-radius: 4px;
//   border: 1px solid rgba(221, 221, 221, 1);
//   color: #333333;
// }
//档案列表查看
//查看按钮
/deep/.el-button--BasicsLook {
  width: 33px;
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(22, 119, 255, 1);
  line-height: 22px;
  border: 0;
}
//编辑按钮
/deep/.el-button--BasicsEdit {
  width: 33px;
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(22, 119, 255, 1);
  line-height: 22px;
  margin-left: 14px;
  border: 0;
}
//删除按钮
/deep/.el-button--BasicsClear {
  width: 33px;
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(22, 119, 255, 1);
  line-height: 22px;
  margin-left: 14px;
  border: 0;
}
.Basics-title {
  padding: 0 0 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  background-color: white;
  .button-group-right {
  }
  > h2 {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 16px;
    border-left: 4px solid #3d7fff;
    padding: 0 0 0 10px;
  }
}
.top1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.left {
  display: flex;
  margin-top: 19px;
  align-items: center;
}
.right {
  margin-top: 19px;
}
/deep/.first {
  width: 260px;
  height: 36px;
}

.left span {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #333333;
}

.five {
  width: 58px;
  height: 36px;
}

.first {
  margin-right: 20px;
}
.second {
  margin-right: 20px;
}
.fenye {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
/deep/.el-date-editor .el-range-separator {
  padding: 0 5px;
  line-height: 32px;
  width: 12%;
  color: #303133;
}
</style>